{% extends "layout.html" %}
{% block content %}

<h2><a href="{{ url_for('ical', token=token ) }}">{{ name }}</a></h2>

<p></p>
<form method='POST' action="">
    <select class="span3" tabindex = "1" id='feed_selector'>
        {% for feed in feeds %}
        <option id='{{ feed[0] }}'>{{ feed[1] }}</option>
        {% endfor %}
    </select>

    <button class="btn btn-primary" tabindex = "2" id='add_feed' href="#">Feed toevoegen</button>
    <br/><br/>

    <table class="table table-bordered">
        <tbody id='feeds_body'>
        <tr>
        </tr>
        </tbody>
    </table>

    <input type="text" tabindex = "3" class="span3" id="enter_tag">
    <button class="btn btn-primary" tabindex = "4" id='add_tag' href="#">Tag toevoegen</button>
    <br/><br/>

    <table class="table table-bordered">
        <tbody id='tags_body'>
        <tr>
        </tr>
        </tbody>
    </table>

    <input type="text" tabindex = "5" class="span3" id="enter_doelgroep">
    <button class="btn btn-primary" tabindex = "6" id='add_doelgroep' href="#">Doelgroep toevoegen</button>
    <br/><br/>

    <table class="table table-bordered">
        <tbody id='doelgroep_body'>
        <tr>
        </tr>
        </tbody>
    </table>

    <input type="text" tabindex = "7" class="span3" id="enter_org">
    <button class="btn btn-primary" tabindex = "8" id='add_org' href="#">Organisator toevoegen</button>
    <br/><br/>

    <table class="table table-bordered">
        <tbody id='org_body'>
        <tr>
        </tr>
        </tbody>
    </table>


    <hr>
    <button type="submit" tabindex = "9" class="btn btn-primary">Opslaan</button>

</form>
<p>
<h4><a href="{{ url_for('ical', token=token ) }}">iCalendar-link</a></h4>
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {

        // Autocomplete code
        var doelgroepen = [
        {% for dg in doelgroepen %}
            "{{ dg.name.replace("&amp;", "&")|safe }}",
        {% endfor %}
        ];
        $("input#enter_doelgroep").autocomplete({
            source: doelgroepen
        });
        $("input#enter_org").autocomplete({
            source: doelgroepen
        });


        // Add tags
        {% for tag in tags %}
            addTag("{{ tag }}");
        {% endfor %}

        // Add feeds
        {% for feed in tokenfeeds %}
            console.log("{{feed}}");
            addFeed({{ feed[0] }}, "{{ feed[1] }}");
        {% endfor %}

        // Add groups
        {% for dg in tokengroups %}
            addDoelgroep("{{ dg }}");
        {% endfor %}

        // Add orgs
        {% for org in tokenorgs %}
            addOrg("{{ org }}");
        {% endfor %}


                // Enable add feed-button
        $("button#add_feed").click(function(event)
        {
            event.preventDefault();
            var selected_id = $("#feed_selector option:selected").attr('id');
            var selected_name = $("#feed_selector option:selected").attr('value');
            if (selected_id) { addFeed(selected_id, selected_name); }
        });

        function addFeed(id, name)
        {
            console.log(id, name);

            // remove feed from dropdown
            $("#feed_selector option#"+id).remove();

            // add feed to table
            var newfeed =
                    '<tr id="'+id+'">' +
                    '<td>' + name + '</td>' +
                    '<td><button type="submit" class="btn btn-danger del_feed_btn" id="delfeed_'+id+'">Feed verwijderen</button><input type="hidden" name="feed_'+id+'" value="'+id+'"</td>' +
                    '</tr>';

            $("tbody#feeds_body").append($(newfeed));

            // enable delete button
            $("#delfeed_"+id).live('click', function() {
                event.preventDefault();
                console.log('Del' + id);
                delFeed(id, name)
            });
        }

        function delFeed(id, name)
        // deletes a feed from the table and places it back in the dropdown-selector
        {
            $("tr#"+id).remove();
            var newfeed = '<option id="'+ id + '">' + name + '</option>';
            $("#feed_selector").append($(newfeed));
        }

        function addTag(tag)
        {
            console.log(tag);

            // Clear input box
            $("#enter_tag").val('');

            // add tag to table
            var newtag =
                    '<tr id="'+tag+'">' +
                            '<td>' + tag + '</td>' +
                            '<td><button type="submit" class="btn btn-danger del_tag_btn" id="deltag_'+tag+'">Tag verwijderen</button><input type="hidden" name="tag_'+tag+'" value="'+tag+'"</td>' +
                            '</tr>';

            $("tbody#tags_body").append($(newtag));

            // enable delete button
            $("#deltag_"+tag).live('click', function() {
                event.preventDefault();
                console.log('Del' + tag);
                delTag(tag)
            });
        }

        function delTag(tag)
            // deletes a tag from the table
        {
            $("tr#"+tag).remove();

        }

        // Enable add tag-button
        $("button#add_tag").click(function(event)
        {
            event.preventDefault();
            var tag = $("#enter_tag").attr('value');
            if (tag) { addTag(tag); }
        });


        // Doelgroepen

        // Enable add doelgroep-button
        $("button#add_doelgroep").click(function(event)
        {
            event.preventDefault();
            var doelgroep = $("#enter_doelgroep").attr('value') + "";
            if (doelgroep) {
                if ($.inArray(doelgroep, doelgroepen) != -1 )
                {
                    addDoelgroep(doelgroep);
                } else {
                    alert('Deze doelgroep bestaat niet.');
                }
            }

        });

        function addDoelgroep(doelgroep)
        {
            // Clear input box
            $("#enter_doelgroep").val('');

            // TODO: remove doelgroep from array

            // add doelgroep to table
            var newdoelgroep =
                    '<tr id="dg'+ $.inArray(doelgroep, doelgroepen)+'">' +
                            '<td>' + doelgroep + '</td>' +
                            '<td><button type="submit" class="btn btn-danger del_doelgroep_btn" id="deldoelgroep_'+$.inArray(doelgroep, doelgroepen)+'">Doelgroep verwijderen</button><input type="hidden" name="doelgroep_'+doelgroep+'" value="'+doelgroep+'"</td>' +
                            '</tr>';

            $("tbody#doelgroep_body").append($(newdoelgroep));

            // enable delete button
            $("#deldoelgroep_"+$.inArray(doelgroep, doelgroepen)).live('click', function(event) {
                event.preventDefault();
                console.log('Del' + doelgroep);
                delDoelgroep($.inArray(doelgroep, doelgroepen));
            });
        }

        function delDoelgroep(dgid)
            // deletes a dg from the table
        {
            console.log('deldoelgroep ' + dgid);
            $("tr#dg"+dgid).remove();

        }

        // Organizers:
        // Enable add org-button
        $("button#add_org").click(function(event)
        {
            event.preventDefault();
            var org = $("#enter_org").attr('value') + "";
            if (org) {
                if ($.inArray(org, doelgroepen) != -1 )
                {
                    addOrg(org);
                } else {
                    alert('Deze organisator bestaat niet.');
                }
            }

        });

        function addOrg(org)
        {
            // Clear input box
            $("#enter_org").val('');

            // add org to table
            var neworg =
                    '<tr id="org'+ $.inArray(org, doelgroepen)+'">' +
                            '<td>' + org + '</td>' +
                            '<td><button type="submit" class="btn btn-danger del_org_btn" id="delorg_'+$.inArray(org, doelgroepen)+'">Organisator verwijderen</button><input type="hidden" name="org_'+org+'" value="'+org+'"</td>' +
                            '</tr>';

            $("tbody#org_body").append($(neworg));

            // enable delete button
            $("#delorg_"+$.inArray(org, doelgroepen)).live('click', function(event) {
                event.preventDefault();
                delOrg($.inArray(org, doelgroepen));
            });
        }

        function delOrg(orgid)
            // deletes a org from the table
        {
            $("tr#org"+orgid).remove();

        }

    });

</script>

{% endblock %}